<template>
  <div class="content">
    <!-- 顶部栏 -->
    <div class="toop-box">
      <van-image
        :src="userIn.photo"
        width="64px"
        height="64px"
        fit="cover"
        round
      />
      <h2>
       {{userIn.name}}
        <br />
        <van-tag color="#fff" text-color="#0098fa" plain type="primary"
          >{{userIn.birthday}}</van-tag
        >
      </h2>
    </div>
    <!-- 收藏 -->
    <van-row class="user-xx">
      <van-col span="8">
        <van-icon name="description" color="#74b7ff" />
        <br />
        我的作品</van-col
      >
      <van-col span="8">
        <van-icon name="star-o" color="#ff5482" />
        <br />
        我的收藏</van-col
      >
      <van-col span="8">
        <van-icon name="todo-list-o" color="#ffb835" />
        <br />
        阅读历史</van-col
      >
    </van-row>
    <!-- 底部列表 -->
    <van-cell-group>
      <van-cell to="/edit" icon="edit" title="编辑资料" is-link @click="$router.push('/edit')"/>
      <van-cell to="/sentud" icon="chat-o" title="小智同学" is-link />
      <van-cell icon="setting-o" title="系统设置" is-link />
      <van-cell icon="warning-o" title="退出登录" is-link @click="logclick" />
    </van-cell-group>
  </div>
</template>

<script>
//导入
import { xinxi } from './user.js'
import { removeToken } from '@/utils/token.js'
export default {
  name: 'user',
  data () {
    return {
      userIn: {}
    }
  },
  methods: {
    logclick () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '确认要退出吗?'
        })
        .then(() => {
          // on confirm
          //清除token
          removeToken()
          //清除用户信息
          this.userIn = {}
          //跳转首页
          this.$troute.push({ path: '/home' })
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  created(){
    xinxi().then(res => {
      console.log(res)
      //绑定数据
      this.userIn = res.data.data
      //将数据更新到vuex
      this.$store.commit('userInof',res.data.data)
    })
  }
}
</script>

<style lang="less">
.content {
  //头部
  .toop-box {
    height: 100px;
    background-color: #ABA3D8;
    display: flex;
    align-items: center;
    h2 {
      font-size: 20px;
      font-weight: normal;
      color: #fff;
    }
    .van-image {
      margin: 0px 15px;
    }
  }
  .user-xx {
    font-size: 16px;
    text-align: center;
    padding: 15px 0;
    .van-icon {
      font-size: 24px;
    }
  }
}
</style>
